{extend name="common/base"/}
<!-- 主体 -->
{block name="body"}

<div class="p-3">
	<form class="layui-form gg-form-bar border-t border-x">
		<div class="layui-input-inline" style="width:300px;">
			<input type="text" name="nickname" placeholder="请输入用户昵称关键字" class="layui-input" autocomplete="off" />
		</div>
		<div class="layui-input-inline" style="width:300px;">
			<input type="text" name="order_no" placeholder="请输入订单号关键字" class="layui-input" autocomplete="off" />
		</div>
		<div class="layui-input-inline" style="width:300px;">
			<input type="text" name="imei" placeholder="请输入设备IMEI" class="layui-input" autocomplete="off" />
		</div>
		<div class="layui-input-inline" style="width:300px;">
			<select name="pay_type">
				<option value="">支付方式</option>
				<option value="1">微信</option>
				<option value="2">积分</option>
				<option value="3">兑换券</option>
			</select>
		</div>
		<div class="layui-input-inline" style="width:300px;">
			<select name="status">
				<option value="">订单状态</option>
				<option value="1">已支付</option>
				<option value="2">售后中</option>
				<option value="3">已处理</option>
			</select>
		</div>
		<button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="searchform">提交搜索</button>
	</form>
	<table class="layui-hide" id="order" lay-filter="order"></table>
</div>

<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-container">
<!--		<span class="layui-btn layui-btn-sm" lay-event="add" data-title="添加订单">+ 添加订单</span>-->
	</div>
</script>
<div class="row col-sm-12" style="display:none;" id="show_div">
	<form class="layui-form model-form" lay-filter="submitForm2" style="margin-top: 10px">
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">拒绝原因：</label>
				<div class="layui-input-inline">
					<textarea name="explain" id="explain" placeholder="请输入拒绝原因" style="width:350px;" class="layui-textarea jian">{$info['explain']|default=''}</textarea>
				</div>
			</div>
		</div>
		<div class="layui-form-item" style="margin-left: 109px">
			<div class="layui-inline">
				<button class="layui-btn">提交</button>
			</div>
		</div>
	</form>
</div>
<script type="text/html" id="barDemo">
<div class="layui-btn-group">
	{{#  if(d.sh_status == 1){ }}
	<a class="layui-btn layui-bg-0 layui-btn-xs" lay-event="tg">通过</a>
	<a class="layui-btn layui-btn-xs" lay-event="jj" data-id="{{ d.id }}">拒绝</a>
	{{#  } }}
	<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="read">查看</a>
<!--	<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>-->
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</div>
</script>
<script type="text/html" id="image">
	<img src="{{d.image}}" width="30" height="30" lay-event="image"/>
</script>
<script type="text/html" id="imagesArr">
	{{# if(d.images != ''){ }}
	{{# layui.each(d.images, function(index, item){ }}
	<img src="{{item}}" width="30" height="30"  lay-event="image"/>
	{{# }); }}
	{{# }else{}}
	暂无图片
	{{#}}}
</script>
{/block}
<!-- /主体 -->

<!-- 脚本 -->
{block name="script"}
<script>
	const moduleInit = ['tool'];
	function gouguInit() {
		var table = layui.table,tool = layui.tool, form = layui.form;
		layui.pageTable = table.render({
			elem: '#order',
			title: '订单列表',
			toolbar: '#toolbarDemo',
			url: '/admin/order/datalist',
			page: true,
			limit: 20,
			// lineStyle:'height:auto',
			cellMinWidth: 60,
			cols: [
				[
				{
					// fixed: 'left',
					field: 'id',
					title: '编号',
					align: 'center',
					width: 80
				},{
					field: 'order_no',
					title: '订单号',
					align: 'center',
				},{
                        field: 'user_info',
                        title: '用户信息',
                        align: 'center',
                    },{
                        field: 'imei',
                        title: '设备IMEI',
                        align: 'center',
                    },{
                        field: 'wine_num',
                        title: '购酒量(ml)',
                        align: 'center',
                    },{
                        field: 'addr',
                        title: '设备地址',
                        align: 'center',
                    }, {
						field: 'pay_type',
						title: '支付方式',
						align: 'center',
						width: 100,
						templet: function (d) {
							var str = "";
							if (d.pay_type == 1) {
								str = '<button type="button" class="layui-btn layui-btn-normal layui-btn-xs">微信</button>';
							} else if (d.pay_type == 2){
								str = '<button type="button" class="layui-btn layui-btn-xs">积分</button>';
							} else {
								str = '<button type="button" class="layui-btn layui-bg-0 layui-btn-xs">兑酒券</button>';
							}
							return str;
						},
					},{
						field: 'amount',
						title: '实付金额',
						align: 'center',
					}, {
						field: 'status',
						title: '订单状态',
						align: 'center',
						width: 100,
						templet: function (d) {
							var str = "";
							if(d.status == 1) {
								str = '<span>已支付</span>';
							} else if(d.status == 2) {
								str = '<span style="color: red">售后中</span>';
							} else {
								str = '<span style="color: #5FB878">已处理</span>';
							}
							return str;
						},
					},{
                        field: 'create_time',
                        title: '创建时间',
                        align: 'center',
                    },
				{
					field: 'right',
					title: '操作',
					toolbar: '#barDemo',
					width: 166,
					align: 'center'
				}				
				]
			]
		});
		
		//监听表头工具栏事件
		table.on('toolbar(order)', function(obj){
			if (obj.event === 'add') {
				tool.side("/admin/order/add");
				return false;
			}
		});

		//监听表格行工具事件
		table.on('tool(order)', function(obj) {
			var data = obj.data;
			if (obj.event === 'read') {
				tool.side('/admin/order/read?id='+obj.data.id);
			}
			else if (obj.event === 'edit') {
				tool.side('/admin/order/edit?id='+obj.data.id);
			}
			else if (obj.event === 'tg') {
				layer.confirm('确认通过吗？', {
					btn: ['确认', '取消'] //可以无限个按钮
				}, function(index, layero){
					$.post('/admin/order/examine', {id:obj.data.id,type:1}, function(res) {
						layer.msg('操作成功',{icon:1,time:1500},function(){
							window.location.reload();
						});
					},'json');
				}, function(index){
					console.log('取消')
				});
			}
			else if (obj.event === 'jj') {
				var id = $(this).data('id');
				var index = layer.open({
					type: 1,
					title: ['提示说明'],//数组第二项可以写任意css样式；如果你不想显示标题栏，你可以title: false
					area: '500px',
					content: $('#show_div'),
					success:function(){
						form.on('submit(submitForm2)', function (data) {
							var explain = $("#explain").val();
							$.post('/admin/order/examine', {type:2,id:id,refuse:explain}, function(res) {
								layer.closeAll();
								layer.msg('操作成功',{icon:1,time:1500},function(){
									window.location.reload();
								});
							},'json');
							return false;
						});
					}
				})
			}
			else if (obj.event === 'del') {
				layer.confirm('确定要删除该记录吗?', {
					icon: 3,
					title: '提示'
				}, function(index) {
					let callback = function (e) {
						layer.msg(e.msg);
						if (e.code == 0) {
							obj.del();
						}
					}
					tool.delete("/admin/order/del", { id: data.id }, callback);
					layer.close(index);
				});
			}
			if(obj.event === 'image')
			{
				var src = $(this).attr('src');
				// 在此处输入 layer 的任意代码
				layer.open({
					type: 1, // page 层类型
					area: ['500px', '500px'],
					title: '',
					shade: 0.6, // 遮罩透明度
					shadeClose: true, // 点击遮罩区域，关闭弹层
					maxmin: true, // 允许全屏最小化
					anim: 0, // 0-6 的动画形式，-1 不开启
					content: "<img src="+src+" style='width: 100%;'>"
				});
			}
			return false;
		});

		//监听搜索提交
		form.on('submit(searchform)', function(data) {
			layui.pageTable.reload({
				where: {
					nickname: data.field.nickname,
					order_no: data.field.order_no,
					imei: data.field.imei,
					pay_type: data.field.pay_type,
					status: data.field.status,
				},
				page: {
					curr: 1
				}
			});
			return false;
		});
	}
</script>
{/block}
<!-- /脚本 -->